import React, { Component } from 'react';

import {
	View,
	Text,
	TouchableOpacity,
	Modal,
	ScrollView,
	StyleSheet
} from 'react-native';
import { ParentBox } from './_components/ParentBox';
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import { GLOBAL } from '../config/global';
const scale = GLOBAL.SCALE;
export class RequirePage extends Component {

	constructor(props) {
		super(props);
		this.state = {
			color: 'red',
			tabIndex: -1
		}

		this.tabData = [
			{ title: '企业信息' },
			{ title: '授信账户' },
			{ title: '交易记录' },
			{ title: '维护记录' },
			{ title: '客户资金' }
		]
	}

	componentWillMount = () => {
		setTimeout(() => {
			this.setState({
				tabIndex: 0,
				ls: true,
			})
		}, 2000)
	}
	/* componentDidMount(){
		this.setState({
			tabIndex:2
		})
	} */


	_onTouchStart(e) {
		/**
		 * 这里直接操作style以达到效果
		 * @type {Object}
		 */
		this._refButton.setNativeProps({
			style: { backgroundColor: '#666' }
		});
	}

	_onTouchEnd() {
		this._refButton.setNativeProps({
			style: { backgroundColor: '#999' }
		});
	}



	render() {
		let { color, tabIndex } = this.state || {};
		console.log("页面渲染...", tabIndex)
		return <View ref={(c) => this._refButton = c} style={styles.container}
			onTouchStart={(e) => this._onTouchStart(e)}
			onTouchEnd={(e) => this._onTouchEnd(e)}>
			<Text style={{ color: color }}>父集</Text>
			<ParentBox color={color} />


			<ScrollableTabView
				renderTabBar={() => <ScrollableTabBar tabStyle={{ paddingLeft: 0, paddingRight: 0, width: 83 * scale }} style={{ borderBottomWidth: 0 }} />}
				//page={tabIndex}
				locked={true}
				initialPage={tabIndex}
				scrollWithoutAnimation={true}
				onChangeTab={(obj) => {
					console.log("点击才走")
					//this._tabFn(obj.i);
					this.setState({ tabIndex: obj.i })
				}}
				tabBarUnderlineStyle={{ backgroundColor: '#FFF' }}
				tabBarActiveTextColor='#FFF'
				tabBarInactiveTextColor='#FFF'
			//tabBarUnderlineStyle={styles.tabBarUnderline}
			>
				{this.tabData && this.tabData.map((item, index) => {
					return (
						<Text key={index} tabLabel={item.title} />
					)
				})}
			</ScrollableTabView>


		</View>
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		position: 'relative',
		backgroundColor: '#000'
		//paddingBottom: 30 * scale
	},
})